學習Angular,你需要知道的一些TypeScript語法糖

前言

TypeScript為微軟開發的JavaScript的超集,語法基本上跟Java很像,擁有強型別便於提早發現問題外,若有必要(比如複製網路上查到的js寫法),也可以直接書寫JavaScript
畢竟最終仍是編譯成JavaScript,因此也讓他擁有不少便利的語法糖,可以讓程式碼更簡潔乾淨

尤其Angular全面使用TypeScript
盡管有後端經驗,在初次學習時,有些語法實在令人費解,但其實只是TypeScript的語法糖!

class的變數,前面可加也可不加public

如下例的msg,TypeScript會自動當成public msg

1
2
3
4
5
6
7
8
9
@Component({
selector: 'home',
templateUrl: './home.component.html',
stylesUrl: ['./home.component.scss']
})
export class HomeComponent {
public title: string = '標題';
msg: string = '訊息';
}

注入服務寫在constructor裡

相信網路上很容易看到這種寫法,當Service或Component要注入其他Service使用時,會直接寫在constructor裡面,就像傳參數一樣,但卻可以直接使用注入的Service
對於熟悉Java的開發者來說,大概會瞬間打結

1
2
3
4
5
@Injectable()
export class UserService {
constructor(private postService: Postservice) {
}
}

TypeScript會自動展開如下

1
2
3
4
5
6
7
@Injectable()
export class UserService {
private postService: Postservice;
constructor(private postService: Postservice) {
this.postService = postService;
}
}

其實就是熟悉的Java寫法呀!
但可以精簡成直接寫在建構子裡,真的會感覺乾淨許多!