前言
- 现在Ts也是比较流行,想自学一下ts
- 所以就一起来学习一下,做下笔记吧
笔记目录
- 安装ts
- 第一个ts
- 项目使用
- 五分钟上手ts
- 基础类型
安装ts
全局安装ts
1
$ sudo npm install -g typescript
全局安装编译环境tsc
1
$ sudo npm install -g tsc
第一个ts
- 创建 greeter.ts文件
文件内部写一个greeter的函数
1
2
3
4
5
6function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
console.log(greeter(user))编译
1
$ sudo tsc greeter.ts
运行查看
1
$ sudo node greeter.js
项目使用
- npm init -y 初始化
定义package
1
2
3"build" : "tsc greeter.ts",
"test" : "node greeter.js",
"start" : "npm run build && npm run test"npm run start 就等于运行了全部
五分钟上手TypeScript
定义类型实现规范化,类型注解
1 | // 给输入的类型添加约束 |
接口
1 | // 定义接口 |
类
- 可以使用类的方法对数据进行约束
- 在构造函数的参数上使用public等同于创建了同名的成员变量
- 在定义的时候也是可以使用数据约束的
1
2
3
4
5
6
7
8
9
10
11
12
13
14class Student {
fullName: string;
constructor(public firstName,public middleInitial : number,public lastName) {
this.fullName = firstName+ " " + middleInitial.toString() + " " + lastName;
}
}
// 等同于
class Student {
fullName: string;
firstName: string;
middleInitial: number;
lastName: string;
}
在web如何使用ts
- 其实很简单就是调用ts打包出来的js文件就可以了
基础类型
布尔值
1 | // 参数约束 后面直接跟布尔值 |
数字
1 | // 2,8,10,16进制都可以 |
字符串
- 单双引号无差别
1
2
3
4
5
6
7
8
9
10let name: string = "bob";
name = "smith";
// 也可以使用字符串模版,在开发的过程中也是常用的一种
// 与字符串拼接效果相同的
let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }.
I'll be ${ age + 1 } years old next month.`;
数组
- 可以定义类型数组,和定义范型
1
2
3
4// number数组
let list : number[] = [1,2,3];
// 范型
let list2: Array<number> = [1, 2, 3];
元组 (其实还是数组)
- 这个东西看起来很人性化
- 在内部每一个位置你都可以定义类型,不相同的类型
- 但是需要插入数据时要一一的对应
1 | // 数组中定义每一个位的属性 |
枚举 (和js比起来容易实现很多)
- 这个枚举呢说是对象也不像对象,说数值也不像数组
- 用对象获取法,获取到的是对应的编号
- 用数组获取法,获取到的是对应的文字
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17// 1. 对象获取,通过名字获取值
enum Color {Red, Green, Blue}
let c: Color = Color.Green; // 1
// 2. 数组获取,通过便利枚举值得到名字
enum Color {Red, Green, Blue}
let colorName: string = Color[2]; // Blue
// 3. 改变编号,默认为0
// 改变后为 1,2,3
enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;
// 4. 全手工赋值
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;
Any (简称任意类型什么都可以支持)
1 | let notSure: any = 4; // number |
Void (不能拥有返回类型,就是无返回类型)
1 | // 1. 函数 |
null/undefined
- 这个就不说了只可以接收自己本身null或undefined 或者 赋值给 void
Never (永远无法到达的类型…)
- 简单的说就是一下常抛出异常
- 数据永不为真时也是never类型
- 任何类型除了never本身都不可以赋值给他
- 但是never可以赋值给任何类型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
throw new Error(message);
}
// 推断的返回值类型为never
function fail() {
return error("Something failed");
}
// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
while (true) {
}
}
Object (简单点就是对象)
- object表示非原始类型,也就是除number,string,boolean,symbol,null或undefined之外的类型。
1
2
3
4
5
6
7
8
9
10
11
12
13
14// declare 声明
// declare function 在ts是声明函数的意思
// 这里就是声明一个名为create 参数o类型为object 或null,的无返回函数
declare function create(o: object | null): void;
// 正确的调用方法
create({ prop: 0 }); // OK
create(null); // OK
// 错误的调用方法
create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error
类型断言 (明确类型)
- 有时候你会遇到这样的情况,你会比TypeScript更了解某个值的详细信息。 通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。
- 其实就是给他明确类型的意思,就是你知道这个是什么类型就直接写什么
- 但是如果上面any定义的类型和你写的不一样,就会出现报错就是出不来
- 两种形式是等价的。 至于使用哪个大多数情况下是凭个人喜好;然而,当你在TypeScript里使用JSX时,只有 as语法断言是被允许的。
1 |
|
后记
- 这个就是我学习Ts的第一天的笔记,欢迎更多的同行大哥指导交流
- 欢迎进入我的博客:https://yhf7.github.io/
- 如果有什么侵权的话,请及时添加小编微信以及qq也可以来告诉小编(905477376微信qq通用),谢谢!