js会了，ts会吗？快来看看ts的入门吧前言 正文 检验有没有安装成功： npx 用于执行 npm 包中的命令而无需全局

前言

TypeScript 是一种开源的编程语言，它是 JavaScript 的超集，为 JavaScript 添加了静态类型系统和其他高级功能。TypeScript 设计用于开发大型应用程序，并且可以在任何运行 JavaScript 的地方运行。

正文

安装Typescript

npm install -g typescript

检验有没有安装成功：

先介绍一下npx和npm的区别

npx 用于执行 npm 包中的命令而无需全局安装，而 npm 用于安装和管理依赖包。

• 创建一个文件1.ts

let a: number = 1;
a = '2';
console.log(a);

会发现有一条红色的线

运行方式

npx tsc 1.ts

定义一个函数，实现加一

function addOne(n) {
    return n + 1;
}

console.log(addOne('hello'));

接下来我们明确形参类型

function addOne(n: number) {
    return n + 1;
}

console.log(addOne('hello'));

安装ts-node来运行代码

npm install -g ts-node

• 安装和检验

• 运行：ts-node 1.ts或tsc 1.ts

使用tsc 1.ts会生成js的编译文件，类型检查也更加严格

输入tsc，可以看见tsc的指令

可以查出代码打错，对新手就很友好

let obj = {message: ''};
console.log(obj.massage);

在赋值前使用也会报错

let str: string;
let num: number;
let flag: boolean;

console.log(str);

ts存在类型推断

1. 数据的类型推断

1. 函数的类型推断根据返回值

tsconfig.json文件

• 创建file1.ts file2.ts

{
    "files": ["why/file1.ts", "why/file2.ts"],
    "compilerOptions": {
        "outFile": "dist/app.js"
    }
}

• 运行tsc，会生成文件夹dist，里面有文件app.js

介绍一下类型any、unknown、never

any

1. 可以赋值任意类型

// any
let z: any;
z = 1;
z = '1';

2. 定义函数add

function add(c, k) {
    return c + k;
}
add(1, 2);

通过tsc --noImplicitAny 1.ts运行，noImplicitAny也就是不能是any类型，没指定类型，默认是any类型

1. any可以赋给其他类型

let a: any = 1;

let b: string = 'hello';

a = b;

unknown

1. unknown 可以赋值成任意任意类型的值

let x: unknown;
x = true;
x = 123;

2. 但是不可以赋给其他类型

let x: unknown;
let y: string;

y = x;

1. 不能访问类型为unknown变量上面的属性

let obj: unknown = {
    a: 1
};

console.log(obj.a);

any类型的可以

let obj: any = {
    a: 1
};

console.log(obj.a);

4. 不能对unknown类型的数据进行加减

let x: unknown = 1;
x = x + 1;

怎么解决呢？进行类型收缩

let x: unknown = 1;
// 收缩类型
if(typeof x === 'number') {
    x = x + 1
}

总结一下any vs unknown

any可以赋值成任意类型的值，也可以赋给其他类型
unknown 可以赋值成任意任意类型的值，但是不可以赋给其他类型
不能访问类型为unknown变量上面的属性

never

1. never不可以赋值成任意任意类型的值

let c: never;

c = 1;

一般不用never定义类型，那用来定义啥呢？

定义函数类型来报错

function foo(): never {
    throw new Error('error')
}

ts的类型有哪些？

之间js里自带的类型

const a: boolean = true;
const b: string = 'hello';
const c: number = 123;
const d: symbol = Symbol(31231);
const e: bigint = 31312312n;

const obj: object = {};
const f: object = function() {};
const arr: object = [];

const un: undefined = undefined;
const nu: null = null;

const str = new String(123);

接下来介绍一下其他的特殊类型

• 值类型

// 值类型
let x: 'hello';
x = 'world';
x = 'hello';

• 联合类型

// 联合类型
let x: string | number;
x = 'hh';
x = 123;

有啥应用呢？定义一个颜色函数，要求形参只能是颜色

function color(color: 'red' | 'yellow' | 'green') {

}

color('red');
color('yellow');
color('green');
color('hello');

• 交叉类型

// 交叉属性
let obj: {foo: string} & {bar: string};
 obj = {
    foo: 'hello',
    bar: 'world'
};

• type关键字

type Age = number;

let age: Age = 18;

type World = 'world';
type Greeting = `hello ${World}`;

type Common = string | number | boolean;
let abc: Common = false;
abc = 123;
abc = 'kkk';

结语