一、基本数据类型

JavaScript原始数据类型 Typescript数据类型
Number number
Boolean boolean
String string
Null null
Undefined undefined
Symbol symbol
bigInt bigInt

类型标注：“变量名：类型”

1.number

Typescript 的number类型支持二、八、十、十六共四种进制的数值：

  1. let num:number;
  2. num = 123;
  3. num = "123";     // error 不能将类型"123"分配给类型"number"
  4. num = 0b1111011; // 二进制的123
  5. num = 0o173;     // 八进制的123
  6. num = 0x7b;      // 十六进制的123
  8. let arr1:number[] = [1,2,3];
  9. let arr2: Array<number> = [1,2,3];

2.string

字符串类型可以使用单引号或者双引号来包裹内容，也可以使用ES6中的模板字符串来拼接变量和字符串

  1. let str: string = "Hello World";
  2. str = "Hello TypeScript";
  3. const first = "Hello";
  4. const last = "TypeScript";
  5. str = `${first} ${last}`;
  6. console.log(str) // 结果: Hello TypeScript

3.boolean

变量值为 true 或者 false，也可以是一个计算后结果为布尔值得表达式

  1. let bool: boolean = false;
  2. bool = true;
  4. let bool: boolean = !!0
  5. console.log(bool) // false

4.null 和 undefined

  1. let bool: boolean = false;
  2. bool = true;
  4. let bool: boolean = !!0
  5. console.log(bool) // false

第一行代码可能会报一个tslint的错误：Unnecessary initialization to ‘undefined’，意思是不能给一个变量赋值为undefined，但实际上是可以的，只需要将tslint 配置 “no-unnecessary-initializer 设置为 false” 即可。

默认情况下，undefined 和null 是所有类型的子类型，可以赋值给任意类型的值，也就是说可以把undefined 赋值给 void 类型，也可以赋值给 number 类型，当在 tsconfig.json的 “compilerOptions”里设置为”strictNullChecks”: true 时，就表示是严格模式，这时 undefined 和 null 就只能赋值给他们自身或者 void 类型，这样就可以规避一些错误。也许在某处你想传入一个 string或null或undefined，你可以使用联合类型string | null | undefined。

5.bigint

bigint表示任意大的整数，可以安全的操作和存储任意大整数，即使这个数已经超出了JavaScript构造函数Number能够表示的安全整数范围。
在 Typescript中，number 类型虽然和bigint都表示数字，但是两者完全不同

  1. declare let foo: number;
  2. declare let bar: bigint;
  3. foo = bar; // error: Type 'bigint' is not assignable to type 'number'.
  4. bar = foo; // error: Type 'number' is not assignable to type 'bigint'.

6.symbol

symbol我们平时使用较少。

（1）基本用法

symbol表示独一无二的值，可以通过Symbol构造函数生成。

  1. const s = Symbol(); 
  2. typeof s; // symbol

Symbol前面不用加 new关键字，直接调用即可创建一个独一无二的值
可以在使用Symbol方法创建的symbol类型的时候传入一个参数，这个参数需要是一个字符串，如果传入的参数不是字符串，会自动调用传入参数的 toString方法转为字符串：

  1. const s1 = Symbol("TypeScript"); 
  2. const s2 = Symbol("Typescript"); 
  3. console.log(s1 === s2); // false

上面创建了两个symbol对象，方法都传入了相同的字符串，但是两个symbol值仍然是不相等，这就说明了Symbol方法会返回一个独一无二的值。

在Typescript 中使用 symbol创建一个变量

  1. let a: symbol = Symbol()

在Typescript中含有一个unique symbol 类型，他是symbol 的子类型，这种类型的值只能由 Symbol() 或 Symbol.for() 创建，或者通过指定类型来指定变量是这种类型，这种类型的值只能用于常量的定义和用于属性名，需要注意，定义unique symbol 类型的值，必须用 const 而不能用let 来声明，下面来看使用 symbol 作为属性名的例子。

  1. const key1: unique symbol = Symbol()
  2. let key2: symbol = Symbol()
  3. const obj = {
  4.     [key1]: 'key1 value',
  5.   [key2]: 'key2 value'
  6. }
  7. console.log(obj[key1]) // key1 value
  8. console.log(obj[key2]) // key2 value

（2）作为属性名

因为symbol表示的值是独一无二的，所以可以当做属性名，并且不会与其他任何属性名重复，当需要访问这个属性时，只能使用这个symbol值来访问（必须使用方括号形式来访问）

  2. let symName = Symbol()
  3. let syObj = {
  4.     [symName]: 'Typescript'
  5. }
  6. console.log(syObj) // { [Symbol()]: 'Typescript' }
  7. console.log(syObj[symName]) //Typescript
  8. console.log(syObj.symName) // 'symName' does not exist on type '{ [x: symbol]: string; }'.

在使用 syObj.symName 访问时，实际上是在访问字符串 symName，这和访问普通字符串类型的属性名是一样的，要想访问属性名为symbol类型的属性时，必须使用方括号。

（3） symbol属性名遍历

使用 symbol类型值作为属性名时，这个属性不会被 for…in 、Object.keys()、Object.getOwnPropertyNames()、JSON.stringify() 等方法获取到：

  1. let symName = Symbol()
  2. let syObj = {
  3.     [symName]: 'Typescript',
  4.     age: 18
  5. }
  6. console.log(Object.keys(syObj))  // [ 'age' ]
  7. console.log(Object.getOwnPropertyNames(syObj))  //[ 'age' ]
  8. console.log(JSON.stringify(syObj)) // {"age":18}

可以使用 Object.getOwnPropertySymbols() 获取symbol类型的值：

  1. let symName = Symbol("name")
  2. let syObj = {
  3.     [symName]: 'Typescript',
  4.     age: 18
  5. }
  6. console.log(Object.keys(syObj))  // [ 'age' ]
  7. console.log(Object.getOwnPropertyNames(syObj))  //[ 'age' ]
  8. console.log(JSON.stringify(syObj)) // {"age":18}
  9. console.log(Object.getOwnPropertySymbols(syObj)) // [ Symbol(name) ]

除此之外，也可以使用ES6 提供的Reflect 对象的静态方法Reflect.ownKeys,他可以返回所以类型的属性名：

  1. let symName = Symbol("name")
  2. let syObj = {
  3.     [symName]: 'Typescript',
  4.     age: 18
  5. }
  6. console.log(Reflect.ownKeys(syObj)) // [ 'age', Symbol(name) ]

二、复杂数据类型

JavaScript复杂数据类型 Typescript 复杂数据类型
Array array
Object object
Function function
元组
枚举
void
never
unknown

1.array

有两种方式可以定义数组。 第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组：

  1. let list: number[] = [1, 2, 3];

第二种方式是使用数组泛型，Array<元素类型>：

  1. let list: Array<number> = [1, 2, 3];

推荐使用第一种方法，可以减少代码量。数组元素类型可以使用联合类型： 

  1. let list: number|string[] = [1, 2, 3, 'age']

2.object

  1. let obj1: object
  2. obj1 = {
  3.     name: 'Typescript'
  4. }
  5. obj1 = 123 // 不能将类型“number”分配给类型“object”。ts(2322)

3.元组

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 string和number类型的元组。

  1. // Declare a tuple type
  2. let x: [string, number];
  3. x = ['hello', 10]; // OK
  4. x = [10, 'hello']; // Error

在新版本中，对元组做了越界判断，超出规定个数的元素称为越界元素，元素赋值必须类型和个数都对应。

  1. interface Tuple extends Array<number | string> { 
  2.    0: string; 
  3.    1: number;
  4.    length: 2; 
  5. }

表示数组元素的类型必须是 string 或者 number，且length 必须为 2，多了或者少了都不行。

4.枚举

使用枚举类型可以为一组数值赋予友好的名字。

  1. enum Color {Red, Green, Blue}
  2. let c: Color = Color.Green;

默认情况下，从0开始为元素编号。 你也可以手动的指定成员的数值。 例如，我们将上面的例子改成从 1开始编号：

  1. enum Color {Red = 1, Green, Blue}
  2. let c: Color = Color.Green;

或者，全部都采用手动赋值：

  1. enum Color {Red = 1, Green = 2, Blue = 4}
  2. let c: Color = Color.Green;

枚举类型提供的一个便利是你可以由枚举的值得到它的名字。 例如，我们知道数值为2，但是不确定它映射到Color里的哪个名字，我们可以查找相应的名字：

  1. enum Color {Red = 1, Green, Blue}
  2. let colorName: string = Color[2];
  4. console.log(colorName);  // 显示'Green'因为上面代码里它的值是2

5.any

any 表示任意类型，当我们在编码时不清楚一个值得类型的时候就可以用any类型了，对于声明为 any 类型的值可以对其做任何操作，包括获取他本身并不存在的属性、方法，因为Typescript 无法检测其属性是否存在、类型是否正确

  1. let value: any;
  2. value = 123;
  3. value = "abc";
  4. value = false;
  6. const array: any[] = [1, "a", true];

6.void

void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void：

  1. function warnUser(): void {
  2.     console.log("This is my warning message");
  3. }

void 类型的变量只能赋值为 undefined 和 null，其他类型都不能赋值给void类型的变量。

7.never

never类型表示的是那些永不存在的值的类型。 例如， never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never类型，当它们被永不为真的类型保护所约束时。
never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使 any也不可以赋值给never。
下面是一些返回never类型的函数：

  1. // 返回never的函数必须存在无法达到的终点
  2. function error(message: string): never {
  3.     throw new Error(message); // 抛出异常
  4. }
  6. // 推断的返回值类型为never
  7. function fail() {
  8.     return error("Something failed");
  9. }
  11. // 返回never的函数必须存在无法达到的终点
  12. function infiniteLoop(): never {
  13.     while (true) { // 死循环
  14.     }
  15. }

8.unknown

unknown 是 Typescript 在3.0 版本新增的类型，主要用来描述类型并不确定的变量，他和any的很相似，但还是有区别的:

  1. let value: any
  2. console.log(value.name)
  3. console.log(value.toFixed())
  4. console.log(value.length)

上面这样写都不会报错，因为是any类型，当 value 为 object 时访问name属性没有问题，当value 是数值类型时，访问toFixed方法也是没有问题的，当value是字符串或者数组时，读取他的 length属性也没有问题。

当值为 unknown 类型时，如果没有缩小范围的话，是不能对他进行任何操作的。

  1. function getValue(value: unknown): string {
  2.   if (value instanceof Date) { 
  3.     return value.toISOString();
  4.   }
  5.   return String(value);
  6. }

这里对value 的类型缩小为了 Date实例范围，所以进行了 value.toISOString()
unknown使用注意以下几点：
（1）任何类型的值都可以赋值给 unknown 类型

  1. let value1: unknown;
  2. value1 = "a";
  3. value1 = 123;

（2）在没有将类型缩小之前是不能进行任何操作的

  1. let value4: unknown;
  2. value4 += 1; // error 对象的类型为 "unknown"

（3）unknown 类型不可以赋值给其他类型，只能赋值给 unknown 和any 类型。

  1. let value2: unknown;
  2. let value3: string = value2; // error 不能将类型“unknown”分配给类型“string”
  3. value1 = value2;

（4）unknown 类型的值不能访问其属性、也不能作为函数或者作为类创建实例

  1. let value5: unknown;
  2. value5.age;   // error
  3. value5();     // error
  4. new value5(); // error

在实际使用中，如果遇到类型无法确定的情况，首先考虑使用 unknown，尽量避免使用any。

  1. let marbried: boolean = false;
  2. let age:number = 0;
  3. let wname:string = 'kk';
  4. // 下面两种等价
  5. let arr1:number[] = [1,2,3];
  6. let arr2: Array<number> = [1,2,3];
  8. // 元组类型tuple，数量和类型已知的数组
  9. let tuple1: [string, number] = ['hhh', 2]
  11. // 枚举类型
  12. enum Gender{
  13.     GIRE,
  14.     BOY
  15. }
  16. // console.log(Gender.BOY)
  17. console.log(Gender['BOY'], Gender[1]);
  18. console.log(Gender['GIRE'], Gender[0])
  20. // 常量枚举
  21. const enum Colors{  // 编译后这部分就没了
  22.     RED, YELLOW, GREEN
  23. }
  25. let myColor = [Colors.RED, Colors.YELLOW, Colors.GREEN]
  27. // 任意类型 any，如果变量定义为any 类型就跟js 差不多，不会进行类型检查
  28. let root:any = document.getElementById('root')
  29. // 内置类型 HTMLElement
  30. let element: HTMLElement|null = document.getElementById('root')
  31. // 非空断言 !
  32. element!.style.color = 'red'
  33. // null undefined 是其他类型的子类
  34. // 如果"strictNullChecks": true, 就不能把 null undefined 赋值给 x
  35. let x:number;
  36. x = 1;
  37. // x = undefined;
  38. // x = null;
  40. // never 代表不会出现的值
  41. // 1.作为不会返回的函数的返回值，类型
  42. function error(message:string):never{
  43.     console.log('ok')
  44.     throw new Error('报错了') // 直接结束了
  45. }
  47. function loop():never{
  48.     while(true){ // 死循环了
  50.     }
  51. }
  53. function fn(x: number | string){
  54.     if(typeof x === 'number'){
  55.         console.log(x)
  56.     }else if(typeof x === 'string'){
  57.         console.log(x)
  58.     }else{
  59.         console.log(x) // 永远不可能到达这儿，never
  60.     }
  61. }
  62. // void 代表没有任何返回值，在非严格模式下 可以赋值给 null undefined，但是 never 不能包含任何类型
  63. function grett():void{
  64.     // return null
  65. }
  66. // 返回void 的函数能正常执行，返回 never 的函数无法正常执行，要么抛出错误，要么死循环
  68. // Symbol 代表唯一不变的值
  70. const s1 = Symbol('key')
  71. const s2 = Symbol('key')
  73. //BigInt ，和number 不兼容
  74. // const max = Number.MAX_SAFE_INTEGER
  75. const max = BigInt(Number.MAX_SAFE_INTEGER)
  1. // 类型推导
  2. let uname; // 初始没有赋值就是 any 类型，赋值给任何类型都可以
  3. uname = 1;
  4. uname = 'lal'
  6. let uname2 = 'string';  // 可以推导出 uname2 是 string 类型
  7. // uname2 = true // 此时会报错 Type 'boolean' is not assignable to type 'string'.ts(2322)
  9. // 包装对象 wrapper object  会将原始类型自动包装成对象类型，然后就可以调用对应的方法了
  10. let name2 = 'lz'
  11. name2.toUpperCase() //name2 是个string 类型，原本没有toUperCase方法，但是内部会自动将string 类型包装成对象类型 new String(name2).toUpperCase()
  13. let isOk1:boolean = true;
  14. let isOk2:boolean = Boolean(1)
  15. // let isOk3:boolean = new Boolean(1) // 不能将一个包装对象赋值给 boolean 类型
  16. // 元组 表示一个已知元素数量和类型的数组，各元素的类型不必相同。
  17. let x: [string, number];
  18. // Initialize it
  19. x = ['hello', 10]; // OK
  20. // Initialize it incorrectly
  21. x = [10, 'hello']; // Error
  23. // 联合类型
  24. let name3 : string | number
  25. // 没赋值之前只能使用string 和 number 的共有方法
  26. console.log(name3!.toString())  // !. 在变量名后添加，可以断言排除undefined和null类型
  27. // 赋值给number 就可以使用 number 类型的方法
  28. name3 = 3;
  29. console.log(name3.toFixed())
  30. // 赋值给 string 就可以使用 string 的方法
  31. name3 = 'jg'
  32. console.log(name3.length)
  34. // 类型断言
  35. let name4:string|number;
  36. console.log((name4! as number).toFixed()) //  强行断言
  37. console.log((name4! as string).length)
  38. // 双重断言
  39. console.log((name4! as any as boolean)) // 不能直接断言成boolean，可以先断言成any 然后再断言成Boolean
  41. // 字面量类型和类型字面量
  42. const up:'Up' = 'Up';
  43. const down: 'Down' = 'Down'
  44. const left: 'Left' = 'Left'
  45. const right: 'Right' = 'Right'
  46. type Direction = 'Up' | 'Down' | 'Left' | 'Right'
  47. function move(direction:Direction){
  49. }
  50. move('Down')
  51. // 类型字面量
  52. type Person = {
  53.     name: string, 
  54.     age: number
  55. }
  56. let p1:Person ={
  57.     name: 'na',
  58.     age: 10,
  59. }
  61. // 字符串字面量和联合类型
  62. type T1 = '1'|'2'|'3';
  63. type T2 = string | number | boolean 
  64. let t1:T1 = '2';
  65. let t2:T2 = true
  1. // 约束函数参数和返回值类型
  2. function hello(name: string):void{ // 没有返回值就是 void
  3.     console.log(name)
  4. }
  5. hello('yf')
  6. // 定义函数类型
  7. type GetName = (firstName: string, lastName: string) => string
  8. function GetName(firstName: string, lastName: string): string{
  9.     return firstName+ lastName
  10. }
  11. // 可选参数age
  12. function print(name: string, age?:number):void{
  13.     console.log(name, age)
  14. }
  15. //默认参数
  16. function ajax(url: string, method: string = 'GET'){
  17.     console.log(url, method)
  18. }
  19. ajax('/')
  20. // 剩余参数
  21. function sum( ...numbers: number[]){
  22.     return numbers.reduce((val, item) => val+item, 0)
  23. }
  24. // 函数的重载
  25. let obj:any = {}
  26. // 定义函数 val 可以是string 也可以是 number
  27. function attr(val: string):void
  28. function attr(val: number):void
  29. // 实现函数
  30. function attr(val: any):void{
  31.     if(typeof val === 'string'){
  32.         obj.name = val;
  33.     }else if(typeof val === 'number'){
  34.         obj.age = val;
  35.     }
  36. }
  37. // 这种也可以
  38. function attr2(val: string|number):void{
  40. }
  42. // 这种就实现不了了
  43. function add(a: string, b:string):void
  44. function add(a: number, b: number):void
  45. function add(a: string | number, b: string | number):void{
  47. }
  49. add(1, 2)
  50. add('a', 'b')
  51. // add(1, 'b') // 在上面的约束下这种就不符合了