ts安裝和寫法 angular安裝及使用

本文轉載自查看原文 2020-12-08 23:03 412

1、全局安裝

npm install -g typescript

2、將ts編譯成js

tsc 文件名.ts   //找到文件目錄

注：可能這里會報錯參考下圖

ts包容性不錯如果str沒加string編譯報錯，但是可以正確轉換成js

function abc(person:string){
    return 'hello '+person
}
let str:string = '123'
console.log(abc(str))

轉換以后

function abc(person) {
    return 'hello ' + person;
}
var str = '123';
console.log(abc(str));

3、安裝angular-cli

npm install -g @angular/cli

4、創建項目

ng new 項目名字(英文)

router 安裝和是否用less自己選擇

5、運行項目

ng serve --open

6、項目中平時改動的地方是src里面的app，其他的很少動，package.json是項目的依賴

app.module.ts是根模塊用到的組件都要導入進來且聲明

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component'; //導入

@NgModule({//裝飾器 裝飾的 class AppModule 
  declarations: [
    AppComponent //聲明
  ],
  imports: [//導入的核心模塊
    BrowserModule,//編譯的
    AppRoutingModule
  ],
  providers: [],//自定義的服務，模塊
  bootstrap: [AppComponent]//掛在的根組件，就是首頁是哪個放那個
})
export class AppModule { }

7、typescript 數據類型

原始數據類型：數值布爾字符串 null undefind

布爾類型定義

let isData:boolean = true
isData = false
let isData:boolean = Boolean(2)  直接調用Boolean是可以的

錯誤寫法:因為new Boolean返回的是一個對象類型

let isData:boolean = new Boolean(2)

數值類型定義

let num:number = 1
let num16:number = 0xf00a
let nonNum:number = NaN
let infiNum:number = Infinity

字符串類型定義

let lname:string = 'joy';
let age:number = 30;
let box:string = `我的年齡是${age}`;
// 空值void  大多數定義函數沒有返回值 ，一般不用於定義變量，因為一旦變量定義為void，賦值只能是undefined或者null
function hello():void{
    console.log('holle')
}

null和undefined定義沒什么意義，他們是所有類型的子類型

例如

let lname:string = 'joy';
lname=undefined
lname=null

//沒啥意義

let a:undefined = undefined

a=null

let b:null = null

b=undefined

void類型是不能賦值給其他類型的，雖然他也只有undefined和null

let lname:string = 'joy';

lname=undefined

let abc:undefined = undefined

let dfe:void = undefined

lname = abc

lname = dfe //這樣不允許因為dfe是void類型

任意值類型：any用來表示任意值類型賦值

let jsf:any = 'abf'
console.log(jsf.myname) //undefined 任意值類型允許訪問他任意的屬性
jsf = 123

// 未聲明類型的變量
let wfkk1;//wfkk1在聲明的時候未定義類型，就被定義成任意類型
let wfkk1 = 'sho';
let wfkk1 = 123;

let somethis = '132'//somethis雖然沒有定義類型，但賦值未字符串。ts有類型推斷規則，會將賦值定義成變量的類型
somethis = 123 // 報錯

聯合類型

表示取值可以取多個

// 聯合類型
let cat:string|number;
cat = 123
cat = '貓'
let cat1:string|number = '貓咪';

ts接口定義接口關鍵詞 interface

接口：行為的抽象。具體的行動由類實現（接口抽象出來的內容）相當於定義的描述

interface Peason{
    name:String;
    age:Number;
}
// 一般接口首字母都會大寫  用接口定義的對象屬性不能多寫不能少寫
let lay:Peason = {
    name:'tom',//約束tom必須和接口一樣的屬性
    age:30
}
let lay1:object = {
    name:'join',
    age:12
}


// 接口屬性可寫可不寫
interface Student{
    name:String;
    age?:Number; //?說明類型可寫可不寫
}

let lack:Peason = {
    name:'abd',//約束tom必須和接口一樣的屬性
    age:30
}

// 多個任意類型可寫可不寫
interface Teacher{
    name: string;
    age?:number;
    [propName:string]:any //propName是自己隨便定義的 string是必須是這個值，不能是number
}
let t1:Teacher = {
    name:'wang',
    age:34,
    school: '清華'
}

// 
interface Cat{
    readonly name:string;//只讀屬性只能賦值一次，后期不能重復定義，可以獲取
    color:string;
    age:number;
}
let c1:Cat={
    name: 'mimi',
    color: 'red',
    age: 1
}
// c1.name = 'bo'//會報錯
// implements 類實現接口的關鍵詞
class SmallCat implements Cat{//定義一個SmallCat類，繼承cat
    name:string = '小貓';
    color:string = 'red';
    age:number = 2;
    constructor(){//設置構造函數

    }
}
let c2 = new SmallCat()
console.log(c2.name) //c2的name也是只讀屬性，因為繼承了cat，不能修改，只能獲取

數組定義類型

// 設定數組定義類型
let arr = [1,2,3]//普通定義方法

// 寫法一 普通的
let arr1:number[] = [1,2,3]//ts定義數組類型，在傳入不能是別的類型
// 寫法二 數組泛型的定義類型
let arr2:Array<number> = [1,2,3]

// arr1.push('str')//報錯

// 寫法三 接口表示數組類型  一般不用
interface NumArr{
    [index:number]:number
}
let arr3:NumArr = [1,2,3]
// arr2.push('str')//報錯