安装及编译
-
npm i typescript -g
- 全局安装ts
- 若是出错可前加sudo尝试
-
npm i -g ts-node
- 全局安装ts-node
- 目的是帮助我们在不需要编译成js的前提下就可以直接执行ts代码
-
tsc --init 生成tsconfig.js配置文件
-
在项目下新建index.ts文件
const a: string = "hello world"; console.log(a);
-
终端输入tsc index.ts
-
会自动生成一个inex.js文件
var a = 'hello world'; console.log(a);
-
-
终端输入ts-node index.ts
- 输出结果hello
-
tsc --watch index.ts
自动编译成js
TS 类型
布尔类型
const flag:boolean=false
Number类型
const num:number=1
String类型
const name:string='tudou'
Enum类型
-
枚举,一一列举出来,例如周一到周末,春夏秋冬,错误码等
enum Color { RED, GREEN, BLUE } const green:Color=Color.GREEN; console.log(green); //1 enum Color { RED=10, GREEN, BLUE } const green:Color=Color.GREEN; console.log(green); //11 enum Week { Mon = '周一' , Tus = '周二' , Wed = '周三' } const wed:Week =Week.Wed console.log(wed); //周三 const enum Seasons { Spring, Summer, Autumn, Winter } const seasons:Seasons[]=[Seasons.Spring,Seasons.Summer,Seasons.Autumn,Seasons.Winter] var seasons = [0 /* Spring */, 1 /* Summer */, 2 /* Autumn */, 3 /* Winter */]; //编译后结果
数组类型
const flag1:nmmber[]=[1,2,3]
const flag2:Array<number> = [1,2,3]
元组类型
-
元组表示一个已知数量和类型的数组,前后类型要对应
const flag : [steing,number] =[ 'hello' , 1]
Symbol类型
-
唯一类型
-
在使用Symbol时必须添加编译辅助库,需要在tsconfig.json的libs上加上ES2015 Symbol的值是唯一不变的
const sym1 = Symbol("hello"); const sym2 = Symbol("hello"); console.log(Symbol("hello") === Symbol("hello")); //false
任意类型 (any)
- 任何类型
- 不推荐使用,太多使用失去了ts的意义
- 一般使用场景
- 第三方库没有提供类型文件
- 数据结构太复杂难以定义
const flag:any =document.getElementById('root')
null和undefined
let u:undefind = undefind
let n:null = null
Unkown类型
-
Unkown和any的主要区别是Unkown类型会更加严格
-
在对Unkown类型的值执行大多数操作之前,我们必须进行某种形式的检查
-
对any类型的值进行操作之前不必进行任何检查
-
所有类型都可以被视为Unkown
-
Unkown类型只能被赋值给any类型和unkown类型本身,any什么都可以分配和被分配
let value: unknown; value = true; // OK value = 42; // OK value = "Hello World"; // OK value = []; // OK value = {}; // OK let value1: unknown = value; // OK let value2: any = value; // OK let value3: boolean = value; // Error let value4: number = value; // Error let value5: string = value; // Error let value6: object = value; // Error
void类型
-
无返回值类型
function hello(name:string):void{}
never类型
-
用于总会操出异常
-
或不会有返回值的函数表达式
-
或箭头函数表达式的返回值类型
function neverReach():never { throw new Error('an error') }
-
never 和 void 的区别 void 可以被赋值为 null 和 undefined 的类型。never 则是一个不包含值的类型。拥有 void 返回值类型的函数能正常运行。拥有 never 返回值类型的函数无法正常返回,无法终止,或会抛出异常。
BigInt 大数类型
-
使用
BigInt
可以安全地存储和操作大整数 -
需要 tsconfig.json配置。ES2020
"target": "es2020",
-
number
和BigInt
类型不一样 不兼容const max1 = Number.MAX_SAFE_INTEGER; // 2**53-1 console.log(max1 + 1 === max1 + 2); //true const max2 = BigInt(Number.MAX_SAFE_INTEGER); console.log(max2 + 1n === max2 + 2n); //false let foo: number; let bar: bigint; foo = bar; //error bar = foo; //error
object, Object 和 {} 类型
-
用于表示非原始类型
let objectCase: object; objectCase = 1; // error objectCase = "a"; // error objectCase = true; // error objectCase = null; // error objectCase = undefined; // error objectCase = {}; // ok
-
Object 表示永远toString、hasOwnProperty方法的类型都可付给 Object(严格模式下
null
和undefined
不可以) -
空对象 和Object一样,表示原始类型和非原始类型
let ObjectCase: Object; //let ObjectCase:{} ObjectCase = 1; // ok ObjectCase = "a"; // ok ObjectCase = true; // ok ObjectCase = null; // error ObjectCase = undefined; // error ObjectCase = {}; // ok
类型推论
-
定义时没有赋值就会推论出any类型
-
如果定义的时候就赋值就能利用到类型推论
let flag; //推断为any let count = 123; //为number类型 let hello = "hello"; //为string类型
联合类型
-
取值可以为多种类型中的一种
-
未赋值时联合类型上只能访问两个类型共有的属性和方法
let name: string | number; name = 1; console.log(name.toFixed(2)); //1.00 name = "hello"; console.log(name.length); //hello
类型断言
- 可以用来手动指定一个值的类型。
- 语法
- 值 as 类型
- <类型>值
- 以上两种方式虽然没有任何区别,但是尖括号格式会与 react 中 JSX 产生语法冲突,因此我们更推荐使用 as 语法
非空断言
-
在上下文中当类型检查器无法判断类型时,一个新的后缀表达式操作符 ! 可以用于断言操作对象是非null 和undefined类型
let flag:null|undefined|string; flag!.toString() //ok flag.toString() //error
字面量类型
-
ts支持三种字面量类型:字符串、数字、布尔
let flag1: "hello" = "hello"; let flag2: 1 = 1; let flag3: true = true;
类型别名
-
给类型起名字
type flag = string|number function hell(value :flag){}
交叉类型
-
多个类型合并为一个类型,通过&运算符将现有的多种类型叠加到一起成为一种类型
type Flag1 = { x: number }; type Flag2 = Flag1 & { y: string }; let flag3: Flag2 = { x: 1, y: "hello", };
类型保护
- 类型保护就是一些表达式,他们在编译的时候就能通过类型信息确保某个作用域内变量的类型 其主要思想是尝试检测属性、方法或原型,以确定如何处理值
typeof保护类型
function double(input: string | number | boolean) {
if (typeof input === "string") {
return input + input;
} else {
if (typeof input === "number") {
return input * 2;
} else {
return !input;
}
}
}
in关键字
interface Bird {
fly: number;
}
interface Dog {
leg: number;
}
function getNumber(value: Bird | Dog) {
if ("fly" in value) {
return value.fly;
}
return value.leg;
}
instabceof类型保护
class Animal {
name!: string;
}
class Bird extends Animal {
fly!: number;
}
function getName(animal: Animal) {
if (animal instanceof Bird) {
console.log(animal.fly);
} else {
console.log(animal.name);
}
}
自定义类型保护
-
通过type is xxx这样的类型谓词来进行类型保护
function isObject(value: unknown): value is object { return typeof value === "object" && value !== null; } function fn(x: string | object) { if (isObject(x)) { // .... } else { // ..... } }
-
value is object
就会认为如果函数返回 true 那么定义的 value 就是 object 类型