TypeScript exercisesを通して、TypeScriptに強くなろう！ #１

はじめに

以下のサイトでは、TypeScriptを手を動かしながら学べるもので、
初めにコードが用意されており、その中で型エラーが仕込まれているため、それを解消していく流れになります。
このサイトでは1～15問まで用意されているので、これから1問ずつ解説していきます。
ぜひ、ご自身で一度解いてみて、答え合わせのつもりでこの記事を参考にしていただければと思います。

最初の状態

今回は、userに赤ラインが引かれ、怒られている状態です。
では、何がだめで、どうすれば解決できるか順に説明します。

何がだめ？

一行目でUserの型が定義されていますね。そこを見ると、unknownと記載されてます。
ただ、赤ラインが引かれているところを見ると、user.name、user.ageと、型定義されていないプロパティにアクセスしようとしてますね。
まずはここを直して、整合性を取りに行きましょう

修正内容

- export type User = unknown
+ export type User = {
+    name: string;
+    age: number;
+    occupation: string;
+ };

- export const users: unknown[] = [
+ export const users: User[] = [
    {
        name: 'Max Mustermann',
        age: 25,
        occupation: 'Chimney sweep'
    },
    {
        name: 'Kate Müller',
        age: 23,
        occupation: 'Astronaut'
    }
];

- export function logPerson(user: unknown) {
+ export function logPerson(user: User) {
    console.log(` - ${user.name}, ${user.age}`);
}

console.log('Users:');
users.forEach(logPerson);

修正箇所は＋の箇所で示した部分になります。

• unknownとなっていたところをしっかり型定義
• 変数の型にunknownがついていた箇所をUserに変更

これで型エラーが解消され、クリアです！

まだ1問目なので簡単でしたね。
2問目も引き続きこんな感じで解説していきます。