这辈子就用typescript了

1. 简介

typescript是javascript的超集，是type+javascript的意思，更适用于书写大型工程，避免类型错误，方便重构，平台适应性强。基于以上各种特性，越来越多的想步入大佬殿堂的的小伙伴都会倾向于选择ts。

2. 环境准备

# 安装nodejs，自带npm包管理工具
下载windows安装程序安装
# 用npm安装解析ts的工具(浏览器/nodejs不能解析ts)
npm i -g typescript

• i install 安装命令
• -g global 全局参数

3. 执行ts文件

3.1. 生成js文件

# 创建hello.ts文件
console.log("hello,ts")
# 生成hello.js文件
tsc hello.ts
# 用node执行js文件
node hello.js

3.2. 不生成js文件

# 安装解析工具ts-node
npm i -g ts-node
ts-node hello.ts

ts-node内部将ts文件转换为js文件，并执行js文件

4. 注释和输出语句

# 单行注释`ctrl + /`
//
# 多行注释`shift + alt + a`
/*
*/
# 输出语句
console.log('Hello TS')

5. 变量和数据类型

let age: number;
age = 18
或
let age: number = 18

let关键字
age 变量名
number 数值类型 类型注解：给变量添加类型约束
分号可选

6. 变量命名规则和规范

命名规则——数字、字母、下划线、美元符号，不以数字开头；大小写敏感；
命名规范——驼峰命名法(首字母小写，后每个单词首字母大写)

let cityName
let childAgeMax

7. 数据类型

基本数据类型 number string boolean undefined null
复杂数据类型

number 整数 小数
string 推荐单引号''括起来字符串
boolean 
undefined 只有一个值undefined 表示声明但未赋值的变量值(找不到值)
null 只有一个值null 表示声明了变量并已赋值，值为null

let name: string = ‘randolph’
let isStudying: boolean = true
let u: undefined = undefined
let n: null = null

8. 运算符

console.log(2 - +'1')
字符串前加上加号可以将字符串类型的数字转换为数值类型的 +'1' 将字符串'1'转换为数字1

有自增自减运算符

比较运算符 结果是布尔类型 === 等于 ！== 不等于
逻辑运算符 结果是布尔类型 && 与  || 或  ! 取反

9. 语句

条件语句

if (条件) {
	条件满足做的事情
} else {
	条件不满足做的事情
}

三元运算符
判断条件 ? 真结果1 : 假结果2

5 > 3 ? '大于' : '小于'

循环语句

for (初始化语句; 判断条件; 计数器更新) {
	循环体
}

for (let i:number = 1; i <=3; i++) {
	console.log('七夕节快乐~')
}

break 提前中断循环
continue 跳过本次循环，继续下次循环

10. 数组[]

创建数组

let names: string[] = []
let names: string[] = ['小明', '小红', '小张']
// 不推荐
let names: string[] = new Array()
let names: string[] = new Array('小明', '小红', '小张')

数组长度、取值、存值

let names: string[] = ['小明', '小红', '小张']
// 数组长度
names.length
// 数组首位元素
names[0]
// 数组末位元素
names[names.length - 1]
// 修改数组元素(索引存在表示修改元素)
names[1] = '阿甘'
// 添加元素(索引不存在表示添加元素) 那索引如果是666很大呢？
names[names.length] = '苏轼'

遍历数组

let names: string[] = ['小明', '小红', '小张']

for (let i : number = 0; i <= names.length - 1; i++) {
	console.log(names(i))
}
// 计数器i值为整数时`i <= names.length - 1`等于`i < names.length`
for (let i : number = 0; i < names.length; i++) {
	console.log(names(i))
}

11. 函数

基础形态

function getSum(nums: number[]) {
	let sum: number = 0
	for (let i : number = 0; i < nums.length; i++) {
		sum += nums[i]
	}
	return sum
}
let nums: string[] = [1, 3, 5]
console.log(getSum(nums))
let nums: string[] = [2, 4, 6]
console.log(getSum(nums))

函数名称：推荐动词开头

函数返回值

function fn(): 类型注解 {
	return 返回值
}
// 示例
function fn(): number {
	return 18
}

变量接收函数返回值

let result: 类型注解 = fn()
// 示例
function fn(): number {
	return 18
}
let result: number = fn()
console.log(result)

12. 对象

12.1. 创建对象

// 对象中的函数称作【方法】
let person = {
	name: 'Miss Jing',
	age: 18,
	sayHi: function () {
		console.log('大家好，我是对象person的方法，调用直接person.sayHi即可')
	}
}

12.2. 对象的类型注解

对象的类型注解用来约束对象的结构

let person: {
	name: string;
	age: number
}

person = {
    name: '马云',
    age: 996
}
console.log(person)

对象方法的类型注解

let p1: {
    sayHi: () => void
}

p1 = {
    sayHi: function () {
        console.log('哎哟不错喂~')
    }
}

let p2: {
    talk: (name: string) => void
}

p2 = {
    talk: function (name: string) {
        console.log('我叫' + name)
    }
}

let p3: {
    sum: (num1: number, num2: number) => number
}

p3 = {
    sum: function (num1: number, num2: number) {
        return num1 + num2
    }
}
p1.sayHi()
p2.talk('马云')
console.log(p3.sum(900, 96))

=>箭头左边表示方法的参数类型，右边表示返回值类型

12.3. 接口

接口约定以大写I开头
因为直接在对象名称后写类型注解缺点：代码不简洁、无法复用类型注解
因此要写成接口的形式
接口作用：为对象的类型注解命名，并约束对象的结构

12.3.1. 接口基础

// 创建一个接口IUser
interface IUser {
    name: string
    age: number
}
// 声明并初始化一个IUser类型的对象
let user1: IUser = {
    name: '马云',
    age: 996
}
console.log(user1)

12.3.2. 接口进阶

接口的属性类型

// 可选属性 用?标识
// 任意属性 [索引签名参数: 类型]: 类型 值的类型可以用联合类型
// 只读属性 readonly 参数名: 类型 只在创建时被赋值
interface Person {
  readonly id: number;
  name: string;
  age?: number;
  //   [propName: number]: any;
  [propName: string]: string | number;
}

let faker: Person = {
  id: 6666,
  name: "Faker",
  age: 25,
  gender: 1,
};

// faker.id = 9527;  // 只读属性只能在创建时被赋值

if (faker.age === undefined) {
  console.log("年龄未赋值！");
} else {
  console.log(faker);
}

接口中用联合类型

interface Person {
  name: string;
  words: string[] | string | (() => string);
}

// words 是字符串
let faker: Person = { name: "Faker", words: "Hello" };
console.log(faker.words);

// words 是字符串数组
faker = { name: "Faker", words: ["Hello", "World"] };
console.log(faker.words[0]);
console.log(faker.words[1]);

// words 是一个函数表达式
faker = {
  name: "Faker",
  words: () => {
    return "**Hello World**";
  },
};

let fn: any = faker.words;
console.log(fn());

接口的继承-单接口继承

interface Person {
  age: number;
}

interface Musician extends Person {
  instrument: string;
}

let faker = <Musician>{};
faker.age = 22;
faker.instrument = "piano";
console.log("年龄: " + faker.age);
console.log("精修乐器: " + faker.instrument);

接口的继承-多接口继承

interface IParent1 {
  v1: number;
}
interface IParent2 {
  v2: number;
}

interface Child extends IParent1, IParent2 {}
let faker: Child = { v1: 22, v2: 23 };
console.log("value 1: " + faker.v1 + " value 2: " + faker.v2);

12.4. 对象取值存值

1. 取值
   访问对象的属性可以通过点语法.
对象.属性
对象.方法()
2. 存值 (注意类型，几乎不会修改对象方法)
   对象.属性 = 新值

12.5. 内置对象

查文档 MDN

例如JSON对象的常用解析方法prase，无聊的时候点开翻一翻，对来龙去脉会更清楚

12.5.1. 数组对象

Array

let songs: string[] = ["五环之歌", "稻香", "千里之外"];

console.log(songs.length);
// push 方法
let len: number = songs.push("晴天");
console.log(len, songs);
// for 循环遍历数组
for (let i: number = 0; i < songs.length; i++) {
  console.log(i, songs[i]);
}
//  forEach 循环遍历数组 假设是隐式和显式的匿名函数
songs.forEach((element, index) => console.log(index, element));

songs.forEach(function (item, index) {
  console.log(index, item);
});
// 练习
let nums: number[] = [1, 23, 6, 44, 65]
let has: boolean = false
nums.forEach(function(num){
  console.log(num)
  if (num > 10) {
    has = true
  }
})
console.log(has)
// some 方法 遍历数组，符合条件即停止
let hasSome:boolean = nums.some(function(num){
  // console.log(num)
  if(num > 10){
    // 满足条件即返回
    return true
  }
  // 否则失败
  return false
})
console.log(hasSome)

13. 类型注解 类型推论 类型断言

• 类型注解（Type annotation）
  为一个变量指定类型
• 类型推断（Type inference）
  通过变量值倒推变量类型，绝大部分情况下是不需要去写类型注解的
有些情况类型推断是无法推断变量类型的，例如函数的参数，需要类型注解来为参数指定类型
• 类型断言（Type Assertion）
  覆盖ts的推断，手动指定一个值的类型；用来告诉编译器你比它更了解这个类型，并且它不应该再发出错误

// const foo = {};     // 具有零属性的对象
// foo.bar = 123;
// foo.bas = 'hello';

interface Foo {
  bar: number;
  bas: string;
}

const foo = {} as Foo;
foo.bar = 123;
foo.bas = "hello";
console.log(foo)

---

参考

• TypeScript 对象的类型-接口【Leophen】