Mac电脑报错的话在前面加一个 sudo,即 sudo npm install typescript -g,然后输入电脑密码。
安装完后使用 tsc 命令测试一下。 tsc -v 查看版本
生成配置文件
使用
tsc -init
编译运行 ts 文件
1. 安装 ts-node,npm install ts-node -g
2. 新建 demo.ts 文件,在终端输入 ts-node demo.ts
2. TS类型
01_类型检测:
// 6种常用类型
let name : string = "游小北"
let age : number = 20
let bool : boolean = true
let un : undefined = undefined
let nu : null = null
let obj : object = { gender : "男" }
// 联合类型
let lianhe : string|number
lianhe = "string"
lianhe = 14
lianhe = true // err 不能将类型“boolean”分配给类型“string | number”
export {}
02_定义数组类型:
// 不指定类型会有类型推导
let arr = [1,2,3]
// 联合类型,也可被推导
let arr1 = ["youxiaobei",2] // string | number
let arr3 : number[] = [1,2,3]
// 指定类型后不能随意往数组内赋值
let arr4 : number[] = ["string",123] // err 不能将类型“string”分配给类型“number”。
// 定义联合类型数组
let arr5 : (number | string)[] = [123,"string"]
// 定义有对象成员的数组
let arr6 : object[] = [{ name:"youxiaobei" },{ age: 19 }]
console.log(arr6);
03_定义函数:
function foo(num1: number, num2: number): number {
return num1 + num2; // 返回值是数字类型,函数就是 :number
console.log(foo(123, 456));
let bar: (x: string) => number = function (x: string) {
console.log(x.length); // 函数参数为数字类型
return 123; // 返回值是数字类型,
console.log(bar("youxiaobei"));
// 函数的可选参数,注意可选参数必须在后面
let koo: (x: number, y?: number) => number = function (x: number, y?: number) {
if (y) {
console.log("输入了第二个参数");
return x;
koo(1, 2);
koo(3);
// 参数默认值
let boo: (x: number, y?: string) => number = function (
x: number,
y: string = "默认值"
console.log(y);
return x;
console.log(boo(1, "hhhh"));
// 剩余参数
function pushArr(arr1: any[], ...items: any[]) {
let newArr: any[] = arr1;
items.forEach((item) => {
newArr.push(item);
console.log(newArr);
let arr: any[] = [1, 2];
pushArr(arr);
pushArr(arr, [123], [456]);
04_元祖定义:
let yuanzu: [string, number, boolean]; // 元祖类型,数量类型都得对应
yuanzu = ["youxiaobei", 1, true];
// 当数量和类型都不确定,使用 any[]
let nuknown: any[];
nuknown = [1];
nuknown = ["youxiaobei"];
nuknown = [1, 2, 3, "string"];
// 解构
let emploee: [number, string] = [1, "youxiaobei"];
let [id, name] = emploee;
console.log(`id : ${id}`); //id : 1
console.log(`name : ${name}`); //name : youxiaobei
// 元祖可选元素
let choose: [string, boolean?];
choose = ["i can choose", true];
console.log(`choose : ${choose}`);
choose = ["i no choose"];
console.log(`choose : ${choose}`);
// 元祖剩余元素
let lefted: [string, ...number[]];
lefted = ["lefted meta", 1, 2, 3, 4, 5];
console.log(`lefted : ${lefted}`);
lefted = ["only one"];
console.log(`lefted : ${lefted}`);
// 只读 readonly
let readonly: readonly [string, number] = ["i am readonly", 124];
readonly = ["i want get in", 123];
readonly = ["123", 123];
console.log(readonly); //可以赋值
// readonly[1] = 1234 //无法分配到 "1" ,因为它是只读属性
// readonly.push(1) //类型“readonly [string, number]”上不存在属性“push”
export {};
05_字符串字面量类型:
let derc : "top" = "top"
derc = "sss" // 不能将类型“"sss"”分配给类型“"top"”
type derction = "top" | "down";
let changederc = function (derc: derction) {
console.log("改变了方向");
changederc("left"); // 类型“"left"”的参数不能赋给类型“derction”的参数
changederc("top");
// 数字字面量类型及布尔字面量类型
interface IConfig {
number: 1 | 2 | 3;
derc: "top" | "left" | "down" | "right";
isEated: true | false
let test = function(user:IConfig) {
// 接口定义类似对象的类型
export {}
test({
number: 1 ,//不能将类型“4”分配给类型“1 | 2 | 3”。
derc: "center", //不能将类型“"center"”分配给类型“"top" | "down" | "left" | "right"
isEated: "yes" //不能将类型“string”分配给类型“boolean”
06_接口作用使用:
interface IConfig {
// 此处定义的是字面量作类型限制,而不是类型符号
number: 1 | 2 | 3;
derc: "top" | "left" | "down" | "right";
isEated: true | false;
let test = function (user: IConfig) {
// 使用接口当作类型,减少代码冗余
// 接口定义类似对象的类型
// 类型别名type覆盖,多次定义接口会合并,同一个接口定义多次合并为一个
interface I1 {
number1: number;
interface I1 {
number2: number;
const obj: I1 = { number1: 123, number2: 456 };
console.log(obj);
export {};
07_泛型:
// 泛型只在调用的使用被确定
let fanx = function <T>(args: T) {};
fanx<number>(123); // good
fanx<string>(123) // err 类型“number”的参数不能赋给类型“string”的参数。
// 泛型约束,继承接口,可为接口定义的类型
interface ItoExtend {
name: string;
age: number;
let personEat = function <T extends ItoExtend>(user: T) {
console.log(`${user.name} is xxx!`);
personEat({ name: "游江川", age: 20 });
08_types和interface:
// 两者定义对象和函数
// 1. type定义
type object1 = {
name: string;
age: number;
type function1 = (x: number, y: boolean) => void;
// 2. interface
interface Iobject2 {
name: string;
age: number;
interface Ifunction2 {
(x: number, y: boolean): void;
let tp: function1 = function () {};
tp(1, true);
let inte: Ifunction2 = function () {};
inte(123, 12); // 类型“number”的参数不能赋给类型“boolean”的参数。
// 类型别名其他用法
// primitive
type Name = string;
// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };
// union
type PartialPoint = PartialPointX | PartialPointY;
// tuple
type Data = [number, string];
// dom
let div = document.createElement('div');
type B = typeof div;
public static age:number;
public sex:string = 'ccc';
constructor(name:string, age:number){}
不能将类型“{ readonly [x: number]: string; toString: () => string; charAt: (pos: number) => string; charCodeAt: (index: number) => number; concat: (...strings: string[]) => string; indexOf: (searchString: string, position?;string和String的区别;TS接口的使用;类型断言
声明:类型 = 类型对应变量复制代码类型收敛——字面量类型复制代码本篇文档讲述了一些基本的类型操作,和一些小的知识点,讲了一些实际场景的类型问题以及如何完成一个类型工具,并介绍了一些常用的类型工具轮子。类型收敛、类型工具非常重要,优化类型收敛、类型工具都是TS官方近两年迭代的主题,比如关键词satisfies,Awaited类型工具、模版字符串、优化控制流分析等等。一篇文章无法覆盖所有的类型API,对于类型的维护,并不需要知道所有的API,但需要清晰将类型收敛到什么程度,才能够满足你的需求。
最近用 typeScript ,也就是大家常说的 【TS 】写点东西,但是老是提醒这个未定义,那个可能为空,主要是 tsconfig.json 中的严格模式我没关,所以今天总结一下,严格模式中【TS】中遇到对象可能为“未定义” 的具体场景,以及共有几种解决方法!
检查当前属性是否在interface定义时,在后面添加了“?”,将此属性定义为了可选属性,解决报错可将此属性定位固定属性将问号去掉。确信这个字段100%出现,可以在属性后面添加感叹号“!”,强调这个字段一定存在,也可以解决报错。
增加了类型(这里说的类型是除js的数据类型外,增加了变量的类型等,就是在类型这块做了强化)
支持ES新特性
增加了一些ES中不具备的新特性(抽象类、工具、接口、装饰器等)
丰富的配置选项
今天来说说简单数据类型 javaScript 的简单数据类型有 7 中
string , boolean , number , null , undefined 简称 五虎上将 还有 左右护法 symbol , bigInt
今天主要谈弹 五虎上将 在 typeScript 中的表现 , 在介绍 哼哈二将 void,any 给 他们认识。
在这里提醒大家 , 可以在目标文件夹下面 运行 tsc --init来初始化, 这样就会生成 一个 名为 t
一、TypeScript 是什么
TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
TypeScript 提供最新的和不断发展的 JavaScript 特性,包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性,比如异步..
时隔多日,我终于能补上这一篇总结了。学习这件事儿,必须得持之以恒,坚持下去。我之前一直觉得自己的知识面过于狭隘,于是找各路视频去弥补,当我了解到前端的学习路线之后,我更是慌张,知识点是如此之多,我懂得却是如此之少,于是乎,我就像看电视剧一样,去看学习视频,感觉自己一下子大补了一顿。但当我想去实践的时候,我却又碰到很多难点了。学习就是这样的,你走的每一步都作数,偷懒走捷径,日后便会吃苦头。学习不光只有学,输出也是其中更为重要的一步,只有学,没有练,没有输出,就始终形成不了自己的知识体系,知识点永远串不起来,也