安装typescript
检测版本
自动编译当个文件
自动编译当前项目下的ts
如果直接使用tsc指令，则可以自动将当前项目下的所有的ts文件编译成js文件
有一个前提，首先在项目的根目录下创建一个ts的配置文件 tsconfig.json
tsconfig.json是一个json文件，添加配置后，只需要tsc命令即可完成对整个项目的编译
|
直接运行TS
//下载
npm install -g ts-node
//运行
ts-node 文件名
|
类型的声明
let 变量名:类型
function fn(变量名:类型){
console.log(变量名)
}
fn();
number、String、boolean、Object、array
let lk:any=10
|
自动类型判断
let a:number=190;
let b =24;
console.log(typeof a)
console.log(typeof b)
|
常量定义（字面量声明）
let op:12
op=19
const lk=10;
|
任意类型
let q1:any;
let q1;
q1=120;
q1='121212';
q1=true;
let q2:number;
q2=19;
q2=q1;
|
unkonwn类型
let w1:unknown;
w1=19;
w1=true
let w2:boolean;
if(typeof w1==='boolean'){
w2=w1;
}
console.log(w1);
console.log(w2)
|
类型断言
let e2:unknown;
e2=190;
let e3:number;
e3=198;
e3=e2 as number;
|
函数的定义
function r1(name){
console.log(name);
}
r1('sdja');
function r2(age:number,name:string){
console.log(age,name);
}
r2(19,'adj1');
function r3(){
}
var run3=r3();
console.log("78:"+run3);
function k1():number{
return 19;
}
function k2():string{
return "你好"
}
function k3():void{
return null;
return undefined;
return ;
}
function k4():never{
throw new Error("错误！");
}
|
声明对象
let y1:object;
y1={};
y1=function (){
}
let y2:{
name:string;
}
y2={
name:'李四'
};
let y3:{
name:string,
age?:number,
sex?:string,
}
y3={
name:'李四',
age:19,
}
let y4:{
name:string,
[propName:string]:unknown,
}
y4={
name:'李四',
age:19,
}
|
数组
在TS我们可以通过
let e:string[];
string[];
e=['a','b','xdclass',1];
再创建一个number型的数组
let d:number[];
boolean型的数组
let e:boolean[];
另外一种数组的声明方式
let e:Array<number>;
数组类型声明的语法：
第一种：
let 变量名:类型名[];
第二种：
let 变量名:Array<类型名>;
假如你还想创建一个能存储任意类型的数组。怎么办呢？
可以这样做
let e:Array<any>;
let e:any[];
for(let i:number = 0; i < u1.length; i++){
console.log(u1[i]);
}
for(let mk in u1){
console.log(u1[mk]);
}
|
tuple元组
1、tuple：叫做元组
2、什么是元组呢？
元组就是定长的数组。（就代表数组中的数量是固定的就叫做元组，元组的存储效率比较好点，因为元组是固定，不会出现扩容的现象，所有效率会好点）
使用场景：
就是数组的数量是固定的，这时候用元组是比较好的选择。
3、元组怎么写呢？
let h:[string,string];
h=['xdclass','net'];
元组书写语法：[类型，类型,类型]；
ok这就是TS中的元组
|
enum枚举
1、什么是enum（枚举）?
在数学和计算机科学理论中，一个集的枚举是列出某些有穷序列集的所有成员的程序，或者是一种特定类型对象的计数
|
2、TS中的枚举Enum
使用枚举，可以定义一些带名字的常量。用于清晰地表达意图或创建一组有区别的用例。
语法：
enum 枚举名称{成员1，成员2....};
1）：数字枚举
默认情况下，第一个枚举值是0，后续至依次增1
enum Color
{
red,
blue,
yellow
}
let col = Color.blue;
alert(col);
2）：字符串枚举
enum gender {
male = '1',
female = '0',
}
alert(gender.male);
|
联合类型声明
在ts中我们可以使用 "|" 进行联合类型声明
语法：
let 变量名:声明类型1|声明类型2.....;
let p1:number|string;
p1=13313;
p1='李四';
let p2:17|19|19|178;
p2=178;
|
类型别名
什么叫类型别名呢？
比如：
let k= 1|2|3|4|5|;
我这里还有一个值p的范围和k是一样的
let p=1|2|3|4|5|;
假如他有几十个呢？我们这样写岂不是麻烦。
这个时候我们可以使用TS提供的类型别名
语法：
type 类型别名的名字=string;
现在可以看做myType和string是等价的
我们测试一下
let b:string;
let c:myType;
console.log(typeof b=== typeof c);
我们接下来使用myType来简化我们之前这个案例
type myType=1|2|3|4|5|;
let k=myType;
let p=myType;
|
类的定义
1、如何定义类：
class Persion{
name:string;
age:number;
}
let mam=new Persion;
如果不传递参数的话（）可以省略
|
2、静态修饰符（static）
被static修饰的属性或者是方法，属于类的。可以通过类名调用，不属于实例的，实例没办使用
案例：
class Persion{
static name:string='xdclass';
static sayHello(){
console.log("嗨！！！！");
};
}
Persion.sayHello();
使用方法：放在属性名或者方法名前面
|
3、readonly
被readonly修饰的属性，只能读取不能修改
案例
Persion.name='老帆'；
|
class Peron{
name:string;
age:number;
}
let a1=new Peron();
a1.name="李四";
a1.age=190;
console.log(a1);
class alin{
static namee:'李四'
}
console.log(alin.namee);
class alin2{
readonly name:'lib'
}
let s1=new alin2();
|
构造方法
1、如何在类中定义一个构造方法
1）:定义一个简单的构造方法
class Dog{
constructor(){
console.log("我创建一个Dog");
}
}
const dog=new Dog();
2):定义一个有参构造方法
class Dog{
constructor(name:string){
console.log(name);
}
}
const dog=new Dog("大黄");
|
2、this改造构造方法
class Dog{
name:string;
constructor(name:string){
this.name=name;
}
}
|
class gzff1{
name:string="李四";
constructor() {
console.log(this.name);
}
}
let s2=new gzff1();
class gzff2{
name:string;
constructor(name:string) {
console.log(this.name);
}
}
let s3=new gzff2('李思');
console.log(s3);
|
继承
2、在TS中如何实现继承呢？
class Animal{
name:string
constructor(name:string){
this.name=name;
}
bark(){
console.log(this.name+'在叫');
}
}
class Dog extends Animal{
constructor(name:string){
super(name);
}
}
此时，Animal被称为父类，Dog被称为子类
使用继承后，子类将会拥有父类所有的方法和属性
通过继承可以将多个类中共有的代码写在一个父类中
这样只需要写一次即可让所有子类都同时拥有父类中的属性和方法
如果希望在子类中添加一些父类中没又的属性或方法直接加就行
|
class Animal{
name:string;
sleep(){
console.log(this.name+" 在睡觉！");
}
constructor(name:string) {
this.name = name;
}
}
class dog extends Animal{
}
let d1=new dog("狗");
d1.sleep();
|
重写
1、什么是重写？
class People{
name:string="人类";
sleep(){
console.log("人类要抽烟喝酒！");
}
}
class Student extends People{
name:string="学生";
sleep(){
console.log("学生在睡觉！");
}
}
let f1=new Student();
console.log(f1);
f1.sleep();
|
super关键字
class FlyAnimal {
name: string = "飞行动物";
fly() {
console.log("动物会飞！");
}
}
class cock extends FlyAnimal {
der(): void {
super.fly();
console.log("子类的方法");
}
}
let g1 = new cock();
g1.der();
class jyteach {
name: string = '李四';
speak() {
console.log(this.name + "会说英语");
}
}
class jystudents extends jyteach {
cf(): void {
super.speak();
console.log("子类的方法");
}
}
let j1 = new jystudents();
j1.cf();
|
函数
function test():void{
console.log('没有返回值')
}
test();
function test2():number{
let k=1+1;
console.log('有返回值')
return k;
}
let res=test2();
console.log(res)
function test3(a:number,b:number):number{
let o=a+b;
return o;
}
let towsum=test3(20,9);
console.log(towsum);
function test4(m:number,k?:number):number{
let p=k || 4;
let mk=m+p;
return mk;
}
let autoseal=test4(10);
console.log(autoseal);
function test5(m:number,k:number=10):number{
let n=m+k;
return n;
}
let defalval=test5(20,1);
console.log(defalval);
function test6(...mk:string[]):void{
console.log(mk);
}
test6('李四','121','1211');
let mk=function (){
console.log('匿名函数！');
}
mk();
let mk2=function (m:number,f:number){
console.log(m+f);
}
mk2(10,2);
(function autorun():void{
console.log('自运行函数！');
}());
|
Map
let nj=new Map();
nj.set(1,'李四');
nj.set(2,'王五');
console.log(nj);
for(let [key,value] of nj){
console.log(key,value);
}
nj.forEach((value,key)=>{
console.log(key,value);
})
|
类
class Props{
name: string='';
age:number=1;
address: string='';
}
let jk=new Props();
jk.name='李四'
jk.age=10;
jk.address='湖南'
console.log(jk);
class Props2{
name: string;
age:number;
address: string;
constructor(name:string,age:number,address:string) {
this.name=name
this.age=age;
this.address=address;
}
}
let p2=new Props2('李四',20,'湖南');
console.log(p2);
class props3{
name: string;
age:number;
constructor(name:string,age:number) {
this.name=name;
this.age=age;
}
zwjs():void{
console.log('我是：'+this.name+" "+"今年："+this.age);
}
}
let p3=new props3('李四2',100);
p3.zwjs();
class person4 {
name: string;
age:number;
constructor(name:string,age:number) {
this.name=name;
this.age=age
}
sc():void{
console.log(this.name,this.age);
}
}
class person41 extends person4{
dis():void{
console.log('内容：'+this.age);
}
}
let ol=new person41();
ol.age=10;
ol.name='李四'
ol.sc();
ol.dis();
class Peploe{
name: string='人类';
sleep():void{
console.log('人类要抽烟！');
}
}
class stuen extends Peploe{
name: string='学生';
sleep() {
console.log('学生要睡觉！');
}
}
let mke=new stuen();
mke.sleep();
class st1{
name: string='学生';
mk(){
console.log('我是学生！super');
}
}
class st2 extends st1{
m1(){
super.mk();
}
}
let o01=new st2();
o01.m1();
|
导出与导入
导出一个
导出
class sMK{
id:number;
name:string;
constructor(id:number, name:string) {
this.id=id;
this.name=name;
}
speak(){
console.log(this.name);
}
}
function ko():void{
console.log('测试！');
}
export default sMK;
|
导入
import sMK from './exportsl';
let s=new sMK(12,'ko');
console.log(s);
|
导出多个
导出
class sMK{
id:number;
name:string;
constructor(id:number, name:string) {
this.id=id;
this.name=name;
}
speak(){
console.log(this.name);
}
}
function ko():void{
console.log('测试！');
}
export {
sMK,ko
}
|
导入
import {sMK,ko} from './exportsl';
let s=new sMK(12,'ko');
console.log(s);
ko();
|
取别名
导出
class sMK{
id:number;
name:string;
constructor(id:number, name:string) {
this.id=id;
this.name=name;
}
speak(){
console.log(this.name);
}
}
function ko():void{
console.log('测试！');
}
export {
sMK as sm,ko as k
}
|
导入
import {sm,k} from './exportsl';
let s=new sm(12,'ko');
console.log(s);
k();
|
